<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuejs</title>
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">{{text}}</div>

<div id="root">
	<h1>hello{{number}}</h1>
	
	<h1 v-text="number"></h1><!--意思是h1 的内容由number变量决定-->
	<h1 v-html="number"></h1><!--v-html不会转义html标签-->
	<div v-on:click="handleclick">{{content}}</div>
	<!-- v-on:click 简写语法@click -->
</div> 
<script>
	/*
	挂载点 root就是挂载点,vue实例只会处理root下面的内容
	模板  可以直接写在挂载点内部
	实例之间的关系

	el 挂载点
	data 数据放在里面
	templete
	*/
	new Vue({
		el:'#root',
		template:'',
		data:{
			msg:'hello word',
			number:123,
			content:'123',
		},
		methods:{
			handleclick:function(){
				//alert(123);
				this.content = 'click bind word';
			}
		}
	});
	new Vue({
		el:'#app',
		data:{
			text:'APP挂载点里的内容'
		}
	});
</script>
</body>
